<template>
    <a-tabs v-model:activeKey="mainStore().currentTab.key" hide-add type="editable-card" class="card-container"
        @change="tabsChange" @edit="tabsEdit">
        <a-tab-pane v-for="tab in mainStore().menuTabs" :key="tab.key" :tab="tab.title" :closable="tab.closable">
            <!-- <component
					:is="tab.component"
					:baseMenuButton="tab.baseMenuButton"
			/> -->
        </a-tab-pane>
        <template #rightExtra>
            <a-dropdown>
                <template #overlay>
                    <a-menu @click="handleMenuClick">
                        <a-menu-item key="all">{{ $t("tabs.closeAll") }}</a-menu-item>
                        <a-menu-item key="other">{{ $t("tabs.closeOther") }}</a-menu-item>
                        <a-menu-item key="this">{{ $t("tabs.closeThis") }}</a-menu-item>
                    </a-menu>
                </template>
                <a-button> {{ $t("tabs.title") }}
                    <DownOutlined />
                </a-button>
            </a-dropdown>
        </template>
    </a-tabs>
    <div class="tab-content">
        <keep-alive>
            <component :is="mainStore().currentTab.component" :baseMenuButton="mainStore().currentTab.baseMenuButton" />
        </keep-alive>
    </div>
</template>

<script setup lang='ts'>
import i18n from '@/i18n';
import ConsoleVue from '@/views/console/index.vue'
import type { MenuTab } from '@/models/menu-tab';
import { mainStore, setCurrentTab, setMenuTabs } from '@/store/main';
import { markRaw, onMounted} from 'vue';
import { DownOutlined } from '@ant-design/icons-vue';

onMounted(() => {
    const tab: MenuTab = {
        title: i18n.global.t('tabs.first'),
        key: 'first',
        closable: false,
        component: markRaw(ConsoleVue)
    };
    setCurrentTab(tab);
    setMenuTabs([tab]);
});

function tabsChange(targetKey: string): void {
    const tabs: Array<MenuTab> = mainStore().menuTabs;
    for (let i: number = 0; i < tabs.length; ++i) {
        const tab: MenuTab = tabs[i];
        if (tab.key === targetKey) {
            setCurrentTab(tab);
            break;
        }
    }
}

function tabsEdit(targetKey: string, action: string): void {
    if (action === 'remove') {
        removeTab(targetKey);
    }
}

/**
 * 关闭当前
 * @param targetKey 
 */
function removeTab(targetKey: string): void {
    const tabs: Array<MenuTab> = mainStore().menuTabs;
    if (targetKey === tabs[0].key) {
        return;
    }
    if (mainStore().currentTab.key === targetKey) {
        for (let i: number = 0; i < tabs.length; ++i) {
            const tab: MenuTab = tabs[i];
            if (tab.key === targetKey) {
                const nextTab: MenuTab = tabs[i + 1] || tabs[i - 1];
                if (nextTab) {
                    setCurrentTab(nextTab);
                    break;
                }
            }
        }
    }
    setMenuTabs(tabs.filter((tab: any) => tab.key !== targetKey));
}

/**
 * 关闭所有
 */
function removeAllTab(): void {
    const tabs: Array<MenuTab> = mainStore().menuTabs;
    setCurrentTab(tabs[0]);
    setMenuTabs(tabs.filter((tab: any) => tab.key === tabs[0].key));
}

/**
 * 关闭其他
 */
function removeOtherTab(): void {
    const tabs: Array<MenuTab> = mainStore().menuTabs;
    setMenuTabs(tabs.filter(
        (tab: any) =>
            tab.key === mainStore().currentTab.key ||
            tab.key === tabs[0].key
    ));
}

/**
 * 页签操作
 */
function handleMenuClick(items: any): void {
    switch (items.key) {
        case "all":
            removeAllTab();
            break;
        case "other":
            removeOtherTab();
            break;
        case "this":
            removeTab(mainStore().currentTab.key);
            break;
    }
}
</script>